import React, { useContext, useState } from "react";
import { View, Image, Text } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";

import { CommonContext, setTabBar } from "../../store";
import api from "@api/api.js";

import bianjiImg from "@assets/my/bianji.png";
import rongyuImg from "@assets/my/rongyu.png";
import fangan from "@assets/workbench/fangan.png";
import hongbao from "@assets/workbench/hongbao.png";

import "./index.less";

export default () => {
  const [state, dispatch] = useContext(CommonContext);
  const [dtl, setDtl] = useState({});
  useDidShow(() => {
    dispatch(setTabBar("我的"));
    getMe();
  });
  // 获取个人资料
  const getMe = async () => {
    const { data, code } = await api.getMe();
    if (code == 200) {
      data.headimgurl =
        data.headimgurl.indexOf("https://") == -1
          ? api.bseUrl + data.headimgurl
          : data.headimgurl;
      setDtl(data);
    }
  };
  // 跳转编辑个人资料
  const goEdit = () => {
    Taro.navigateTo({ url: `/pages/editProfile/index` });
  };
  // 跳转专家认证
  const goEditExpert = () => {
    Taro.navigateTo({ url: `/pages/editExpert/index` });
  };
  // 跳转我的案例
  const goMyCase = (url) => {
    Taro.navigateTo({ url: url });
  };
  return (
    <View className="bgBox">
      <View className="card">
        <View className="bc">
          <View className="head">
            <Image src={dtl.headimgurl} />
          </View>
          <View className="name">
            <Text>{dtl.name}</Text>
            <View className="name-btn">
              <Image className="bianjiImg" src={bianjiImg} />
              <View onClick={goEdit}>编辑个人资料</View>
            </View>
          </View>
          <View className="title">
            {dtl.hospital} {dtl.positionDesc}
          </View>
          <View className="field">擅长领域：{dtl.expertise}</View>
          <View className="telephone">手机号 {dtl.phone}</View>
        </View>
      </View>
      <View className="expert" onClick={goEditExpert}>
        <Image src={rongyuImg} />
        认证专家身份
      </View>
      <View className="infos">
        <View
          className="info listBox"
          onClick={() => {
            goMyCase("/pages/redPacket/index");
          }}
        >
          <View className="icon">
            <Image src={hongbao} className="balance" />
          </View>
          <View className="lable">我的红包</View>
          <View className="val">￥{dtl.consultPrice}</View>
        </View>
        <View
          className="info listBox"
          onClick={() => {
            goMyCase("/pages/myCase/index");
          }}
        >
          <View className="icon">
            <Image src={fangan} className="diag" />
          </View>
          <View className="lable">我的案例</View>
          <View className="val">{dtl.caseDataSum}</View>
        </View>
      </View>
    </View>
  );
};
